<template>
    <Row :gutter="24">
        <Col :xl="16" :lg="12" :md="24" :sm="24" :xs="24">
            <h4>回访曲线图</h4>
            <div ref="visitChart" v-height="360"></div>
        </Col>
        <Col :xl="8" :lg="12" :md="24" :sm="24" :xs="24">
            <h4>回访状态图</h4>
            <div ref="visitPer" v-height="360"></div>
        </Col>
    </Row>
</template>
<script>
    import echarts from 'echarts';
    export default {
        data () {
            return {
                echartData: {}
            }
        },
        methods: {
            handleGetData (data, visitType) {
                this.echartData = data;
                this.handleSetVisitChart();
                this.handleSetVisitPer();
            },
            handleSetVisitPer () {
                this.visitPer = echarts.init(this.$refs.visitPer);
                this.visitPer.setOption(
                    {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            left: 'center',
                            bottom: '20px',
                            data: this.echartData.state_list
                        },
                        series: [
                            {
                                name: '面积模式',
                                type: 'pie',
                                radius: [30, 110],
                                center: ['50%', '50%'],
                                roseType: 'area',
                                data: this.echartData.state_arr,
                                color: ['#1495EB', '#00CC66', '#F9D249', '#ff9900', '#9860DF']
                            }
                        ]
                    }
                );
            },
            handleSetVisitChart () {
                this.visitChart = echarts.init(this.$refs.visitChart);
                this.visitChart.setOption(
                    {
                        xAxis: {
                            type: 'category',
                            axisLine: {
                                lineStyle: {
                                    color: '#D7DDE4'
                                }
                            },
                            axisTick: {
                                alignWithLabel: true,
                                lineStyle: {
                                    color: '#D7DDE4'
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#7F8B9C'
                                }
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#F5F7F9'
                                }
                            },
                            data: this.echartData.time_list,
                            boundaryGap: false
                        },
                        yAxis: {
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#7F8B9C'
                                }
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#F5F7F9'
                                }
                            },
                            type: 'value'
                        },
                        legend: {
                            data: ['已回访', '过期未回访'],
                            x: 'right'
                        },
                        series: [
                            {
                                data: this.echartData.achieve_callback,
                                name: '已回访',
                                type: 'line',
                                tooltip: true,
                                smooth: true,
                                symbol: 'none',
                                areaStyle: {
                                    normal: {
                                        opacity: 0.2
                                    }
                                }
                            },
                            {
                                data: this.echartData.no_callback,
                                name: '过期未回访',
                                type: 'line',
                                tooltip: true,
                                smooth: true,
                                symbol: 'none',
                                areaStyle: {
                                    normal: {
                                        opacity: 0.2
                                    }
                                }
                            }
                        ],
                        color: ['#1495EB', '#00CC66', '#F9D249', '#ff9900', '#9860DF'],
                        grid: {
                            left: 20,
                            right: 20,
                            bottom: 20,
                            top: 40,
                            containLabel: true
                        },
                        tooltip: {
                            trigger: 'axis'
                        }
                    }
                );
            },
            handleResize () {
                if (this.visitChart && this.visitPer) {
                    this.visitChart.resize();
                    this.visitPer.resize();
                }
            }
        },
        mounted () {},
        beforeDestroy () {
            if (this.visitChart) {
                this.visitChart.dispose();
                this.visitChart = null;
            }
        }
    }
</script>
<style scoped lang="less">
  h4 {
    color: #515a6e;
    font-size: 14px;
    font-weight: bold;
  }
</style>
